<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
	<script type="text/javascript" src="Scripts/CanvasLib/3D/utils.js"></script>

	<script type="text/javascript" src="Scripts/CanvasLib/3D/shader-context.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/animation.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/3D/geometry.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/3D/shape3d.js"></script>

	
	<script type="text/javascript" src="Scripts/CanvasLib/3D/dom-utils.js"></script>
	
	<script type="text/javascript" src="Scripts/CanvasLib/3D/buffers.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/baseshape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/smartshape.js"></script>
	<script type="text/javascript" src="Scripts/CanvasLib/3D/smartscene.js"></script>
	

	<script type="text/javascript" src="Scripts/CanvasLib/image-manager.js"></script>
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library 3D - Tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
				<div class="property category">
					Scene Actions
				</div>
				<div class="property">
					<div class="label">Force redraw</div>
					<div class="value"><input type="button" value="Reset Scene" onclick="resetScene();"/></div>						
				</div>	
				<div class="property category">
					Animations
				</div>	
				<div class="property">
					<div class="label">Pyramid</div>						
					<div class="value"><input type="button" value="Rotate" onclick="addRotateAnimation()"/></div>						
				</div>	
				<div class="property">
					<div class="label">Pyramid</div>						
					<div class="value"><input type="button" value="Translate" onclick="addTranslateAnimation()"/></div>						
				</div>	
				<div class="property">
					<div class="label">Stop Animations</div>						
					<div class="value"><input type="button" value="Stop" onclick="stopAnimations()"/></div>						
				</div>	
				<div class="property category">
					Camera
				</div>	
				<div class="property">
					<div class="label">Translate</div>						
					<div class="value"><input type="button" value="Translate" onclick="translateCamera()"/></div>						
				</div>
				<div class="property">
					<div class="label">Rotate</div>						
					<div class="value"><input type="button" value="Rotate" onclick="rotateCamera()"/></div>						
				</div>
				<div class="property category">
					Behavior
				</div>
				<div class="property">
					<div class="label">Add random shapes</div>						
					<div class="value"><input type="button" value="Add" onclick="addRandom()"/></div>						
				</div>
				<div class="property">
					<div class="label">Camera movement</div>						
					<div class="value">Arrow keys, or +/- </div>
				</div>
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="500" height="500" id="c" style="border:2px solid black;"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Available functionalities</h2>
				<strong>Setup the scene</strong><br>
				<ul>
					<li>Set background image or color.</li>
				</ul>
				
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script id="shader-fs" type="x-shader/x-fragment">
    /*VERSION 1 with a static color*/
    /*precision mediump float;

    void main(void) {
        gl_FragColor = vec4(1.0, 0, 1.0, 1.0);
    }*/
	
	/*VERSION 2 with gradients*/
	precision mediump float;

	varying vec4 vColor;

	void main(void) {
		if(vColor)
			gl_FragColor = vColor;
	}
	
	
</script>

<script id="shader-vs" type="x-shader/x-vertex">
	/*VERSION 1 with a static color*/
    /*attribute vec3 aVertexPosition;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    }*/
	
	/*VERSION 2 with gradients*/
	attribute vec3 aVertexPosition;
	attribute vec4 aVertexColor;

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;
   
    varying vec4 vColor;

    void main(void) {
	  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.5);	  	 
	  vColor = aVertexColor;
	}
</script>

	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
		var imgManager = new ImageManager();
		imgManager.add("crate","images/crate2.jpg");
		var scene = new SmartScene("c","3D");
		scene.context.clearColor(255.0, 255.0, 255.0, 255.0);
		scene.context.enable(scene.context.DEPTH_TEST);
		
		var s = new SmartShape(scene);
		s.position = {x:-3,y:-2,z:-10};
		s.applyGeometry(new CubeGeometry(3));
		
		scene.addShape(s);
		scene.draw();
		debugger;
	</script>
</body>
</html>